<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" th:href="@{/center/lib/layui-v2.5.5/css/layui.css}" media="all">
		<link rel="stylesheet" th:href="@{/center/css/public.css}" media="all">
		<script th:src="@{/center/lib/layui-v2.5.5/layui.js}" charset="utf-8"></script>
		<script th:inline="none">
			layui.use(['form', 'table','laydate'], function() {
				var $ = layui.jquery,
					form = layui.form,
					table = layui.table,
					laydate = layui.laydate;
					
					laydate.render({
						elem: '#date',
						type: 'datetime',
						format: 'yyyy-MM-dd HH:mm:ss',
						max: 'new Date()'
					});
		
		
				var tableIns = null;
		
				// 监听搜索操作
				//多条件查询，带分页
				form.on('submit(data-search-btn)', function(data) {
					console.log("前端参数:" + JSON.stringify(data.field));
					var jsonstr = JSON.stringify(data.field);
					
					tableIns = table.render({
						elem: '#currentTableId',
						url: '/center/showUserByCondition',
						method: "post",
						contentType: 'application/json;charset=utf-8',
						unresize:'false',
						where: {
							jsonstr: jsonstr
						},
						parseData: function(res) {
							console.log("前端收到的回调:"+res.data[0].list);
							return {
								"code": res.code,
								"msg": res.msg,
								"count": res.count,
								"data": res.data[0].list
							}
						},
						initSort: {
							field: 'date',
							type: 'desc'
						},
						toolbar: '#toolbarDemo',
						defaultToolbar: ['filter', 'exports', 'print', {
							title: '提示',
							layEvent: 'LAYTABLE_TIPS',
							icon: 'layui-icon-tips'
						}],
						cols: [
							[
								
								{
									title: '操作',
									width: 220,
									toolbar: '#currentTableBar',
									align: "center"
								},{
									field: 'photo',
									width: 200,
									title: '用户照片',
									templet:"#phototemp"
								},
								{
									field: 'name',
									width: 100,
									title: '用户名',
									sort: true
								},
								{
									field: 'centerAccountstatus',
									width: 100,
									title: '账号状态',
									templet:function(d){
										if(d.centerAccountstatus=='0'){
											return '未认证'
										}else if(d.centerAccountstatus=='1'){
											return '已认证'
										}else if(d.centerAccountstatus=='2'){
											return '已封号'
										}
									},
									sort: true
								},
								{
									field: 'centerUsertype',
									width: 100,
									title: '用户类型',
									templet:function(d){
										if(d.centerUsertype=='1'){
											return '业主'
										}else if(d.centerUsertype=='2'){
											return '商家'
										}else if(d.centerUsertype=='3'){
											return '物业'
										}
									},
									sort: true
								},
								{
									field: 'nickname',
									width: 100,
									title: '昵称',
									sort: true
								},
								{
									field: 'intro',
									width: 200,
									title: '简介',
									sort: true
								},
								{
									field: 'date',
									width: 200,
									title: '注册时间',
									sort: true
								},
								{
									field: 'phone',
									width: 200,
									title: '手机',
									sort: true
								},
								{
									field: 'email',
									width: 200,
									title: '邮箱',
									sort: true
								},
								{
									field: 'coin',
									width: 200,
									title: '金币数',
									sort: true
								},
								{
									field: 'centerCredentialcode',
									width: 200,
									title: '证件号',
									sort: true
								},
								{
									field: 'centerVerifydata',
									width: 200,
									title: '认证材料照片',
									templet:"#verifytemp"
									
								},
								{
									field: 'forumId',
									width: 200,
									title: '社区ID',
									sort: true
								},
								{
									field: 'id',
									width: 200,
									title: '用户ID',
									sort: true
								}
							]
						],
						limit: 10,
						limits: [10, 15, 20, 25, 50, 100],
						page: true,
						skin: 'row'
					});
		
					return false;
				});
		
		
		
		
		
				//监听表格复选框选择
				table.on('checkbox(currentTableFilter)', function(obj) {
					console.log(obj.data);
		
				});
		
		
			table.on('tool(currentTableFilter)', function (obj) {
			    var data = obj.data;
			    var jsonstr = data.id;
			    if (obj.event === 'suspend') {
			        layer.confirm('是否确定封禁ID为：' + jsonstr + '的账号', function (index) {
			            $.ajax({
			                url: '/center/suspendAccount',
			                contentType: 'application/json;charset=utf-8',
			                method: 'POST',
			                data: jsonstr,
			                success: function (res) {
			                    layer.alert(res.msg);
			                    tableIns.reload();
			                }
			            });
				
			            layer.close(index);
			        });
			    }else if (obj.event === 'unsuspend') {
			        layer.confirm('是否确定解封ID为：' + jsonstr + '的账号', function (index) {
			            $.ajax({
			                url: '/center/unsuspendAccount',
			                contentType: 'application/json;charset=utf-8',
			                method: 'POST',
			                data: jsonstr,
			                success: function (res) {
			                    layer.alert(res.msg);
			                    tableIns.reload();
			                }
			            });
				
			            layer.close(index);
			        });
			    }else if (obj.event === 'resetPassWord') {
			        layer.confirm('是否确定重置ID为：' + jsonstr + '账号的密码', function (index) {
			            $.ajax({
			                url: '/center/resetPassWord',
			                contentType: 'application/json;charset=utf-8',
			                method: 'POST',
			                data: jsonstr,
			                success: function (res) {
			                    layer.alert(res.msg);
			                    tableIns.reload();
			                }
			            });
				
			            layer.close(index);
			        });
			    }
			});
				
		
			});
		</script>
		
		
		<!-- 图片单元格模板 -->
			<script type="text/html" id="phototemp" th:inline="javascript">
				<img src="{{d.photo}}"/>
		</script>
			<script type="text/html" id="verifytemp" th:inline="javascript">
				<img src="{{d.centerVerifydata}}" />
		</script>
		<!-- 配合图片大小自适应表格高度 -->
		<style>
			.layui-table-cell {
		            height: 100%;
		            max-width: 100%;
		        }
		</style>
		
		
	</head>
	<body>
		<div class="layuimini-container">
			<div class="layuimini-main">

				<fieldset class="table-search-fieldset">
					<legend>查询用户</legend>
					 <div style="margin: 10px 10px 10px 10px">
						
						<form class="layui-form layui-form-pane" action="">
							<div class="layui-form-item">
								
								<div class="layui-inline">
									<label class="layui-form-label">用户名</label>
									<div class="layui-input-inline">
										<input type="text" name="name" id="name" autocomplete="off" class="layui-input">
									</div>
									<label class="layui-form-label">账号状态</label>
									<div class="layui-input-inline">
										<input type="text" name="centerAccountstatus" id="centerAccountstatus" autocomplete="off" class="layui-input">
									</div>
								</div> 
							
								
								
								<div class="layui-inline">
									<label class="layui-form-label">用户类型</label>
									<div class="layui-input-inline">
										<input type="text" name="centerUsertype" id="centerUsertype" autocomplete="off" class="layui-input">
									</div>
									<label class="layui-form-label">昵称</label>
									<div class="layui-input-inline">
									<input type="text" name="nickname" id="nickname" autocomplete="off" class="layui-input">
									</div>
								</div>
								
								<div class="layui-inline">
									<label class="layui-form-label">简介</label>
									<div class="layui-input-inline">
										<input type="text" name="intro" id="intro" autocomplete="off" class="layui-input">
										</div>
										<label class="layui-form-label">注册时间</label>
										<div class="layui-input-inline">
											<input type="text" name="date" id="date" autocomplete="off" class="layui-input">
									</div>
									</div>
								
							
								<div class="layui-inline">
									<label class="layui-form-label">手机</label>
									<div class="layui-input-inline">
										<input type="text" name="phone" id="phone" autocomplete="off" class="layui-input">
									</div>
								<label class="layui-form-label">邮箱</label>
								<div class="layui-input-inline">
									<input type="text" name="email" id="email" autocomplete="off" class="layui-input">
								</div>
								</div>
								
							
								
								<div class="layui-inline">
									<label class="layui-form-label">金币数</label>
									<div class="layui-input-inline">
										<input type="text" name="coin" id="coin" autocomplete="off" class="layui-input">
									</div>
								<label class="layui-form-label">证件号</label>
								<div class="layui-input-inline">
									<input type="text" name="centerCredentialcode" id="centerCredentialcode" autocomplete="off" class="layui-input">
								</div>
								
								</div>
								
							
								
								<div class="layui-inline">
									<label class="layui-form-label">社区ID</label>
									<div class="layui-input-inline">
										<input type="text" name="forumId" id="forumId" autocomplete="off" class="layui-input">
									</div>
							<label class="layui-form-label">用户ID</label>
							<div class="layui-input-inline">
								<input type="text" name="id" id="id" autocomplete="off" class="layui-input">
							</div>
								</div>
								
								
								
								<div class="layui-inline">
									<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i>
										查询
									</button>
								</div>
							</div>
						</form>
					</div>
				</fieldset>

				<script type="text/html" id="toolbarDemo">
					<div class="layui-btn-container">
					 
            </div>
        </script>

				<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

				<script type="text/html" id="currentTableBar">
					<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="suspend">封号</a>
					<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="unsuspend">解封</a>
					<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="resetPassWord">重置密码</a>
        </script>

			</div>
		</div>
	</body>
</html>
